import * as THREE from 'three'
import { gui } from '../gui'
import { stats } from '../stats'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'

function createCourse17 (dom: HTMLElement) {
  const scene = new THREE.Scene()
  const camera = new THREE.PerspectiveCamera(75, dom.offsetWidth / dom.offsetHeight, 0.1, 1000)

  const render = new THREE.WebGLRenderer()
  render.setClearColor(new THREE.Color(0x000000))
  render.setSize(dom.offsetWidth, dom.offsetHeight)
  render.shadowMap.enabled = true

  dom.appendChild(render.domElement)

  const axes = new THREE.AxesHelper(100)
  scene.add(axes)

  const points: THREE.Vector3[] = []
  for (let i = 0; i < 10; i++) {
    points.push(new THREE.Vector3(i * 3, Math.sin(i) * 5, i * 3))
  }
  points.forEach(function (point) {
    const sphereGeo = new THREE.SphereGeometry(0.2)
    const sphereMat = new THREE.MeshBasicMaterial({ color: 0xff0000 })
    const sphere = new THREE.Mesh(sphereGeo, sphereMat)
    sphere.position.copy(point)
    scene.add(sphere)
  })

  const path = new THREE.CatmullRomCurve3(points)
  const lineGeo = new THREE.BufferGeometry()
  lineGeo.setFromPoints(path.getPoints(100))
  const lineMat = new THREE.LineBasicMaterial({ color: 0xff0000 })
  const line = new THREE.Line(lineGeo, lineMat)
  scene.add(line)

  let tubeGeo = new THREE.TubeGeometry(path, 50, 3, 30, false)
  const tubeMat = new THREE.MeshBasicMaterial({ color: 0x00ff00, wireframe: true })
  let tube = new THREE.Mesh(tubeGeo, tubeMat)
  scene.add(tube)

  const ctrlObj = {
    tubalarSegments: 50,
    radius: 3,
    radialSegments: 30,
    closed: false
  }

  const ctrl = gui
  const tubeFolder = ctrl.addFolder('tube')
  tubeFolder.add(ctrlObj, 'tubalarSegments', 0, 100).onChange(function () {
    scene.remove(tube)
    tubeGeo = new THREE.TubeGeometry(path, ctrlObj.tubalarSegments, ctrlObj.radius, ctrlObj.radialSegments, ctrlObj.closed)
    tube = new THREE.Mesh(tubeGeo, tubeMat)
    scene.add(tube)
  })
  tubeFolder.add(ctrlObj, 'radius', 0, 10).onChange(function () {
    scene.remove(tube)
    tubeGeo = new THREE.TubeGeometry(path, ctrlObj.tubalarSegments, ctrlObj.radius, ctrlObj.radialSegments, ctrlObj.closed)
    tube = new THREE.Mesh(tubeGeo, tubeMat)
    scene.add(tube)
  })
  tubeFolder.add(ctrlObj, 'radialSegments', 0, 100).onChange(function () {
    scene.remove(tube)
    tubeGeo = new THREE.TubeGeometry(path, ctrlObj.tubalarSegments, ctrlObj.radius, ctrlObj.radialSegments, ctrlObj.closed)
    tube = new THREE.Mesh(tubeGeo, tubeMat)
    scene.add(tube)
  })
  tubeFolder.add(ctrlObj, 'closed').onChange(function () {
    scene.remove(tube)
    tubeGeo = new THREE.TubeGeometry(path, ctrlObj.tubalarSegments, ctrlObj.radius, ctrlObj.radialSegments, ctrlObj.closed)
    tube = new THREE.Mesh(tubeGeo, tubeMat)
    scene.add(tube)
  })

  camera.position.x = 0
  camera.position.y = 0
  camera.position.z = 50
  camera.lookAt(scene.position)
  scene.add(camera)

  const controls = new OrbitControls(camera, render.domElement)
  controls.update()

  render.setAnimationLoop(anmation)

  function anmation () {
    stats.update()
    render.render(scene, camera)
  }

  return { camera, scene, render }
}

export {
  createCourse17
}
